<template>
  <div>
    <div class="six">
        <!-- 面包屑导航 -->
        <el-breadcrumb
        style=" margin-top: 10px; margin-left: 10px"
          separator-class="el-icon-arrow-right">
          <el-breadcrumb-item style="margin-top:8px" :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item style="margin-top:8px">景区列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    <div class="container">
      <div class="leftimg">
        <img src="/img/two/two4.jpg" alt="">
      </div>

      <div class="zhong">
        <div class="zhong-title">
          <h2>
            <router-link to="#">老君山风景区</router-link>
          </h2>
        </div>
        <div class="zhong-one">
          <span><i>AAAAA</i> 级景区</span>
          <span>月销量:</span>
          <span><i>1641043</i></span>
          <span><i>0</i>条评论</span>
        </div>
        <div class="zhong-text">
          老君山风景名胜区位于河南省栾川县城东区，面积2666公顷，是伏牛山世界地质公园、国家AAAAA级旅游景区、国家级自然保护区、省级风景名胜
        </div>
        <div class="zhong-adress">
          地址：河南省-洛阳市-栾川县
        </div>
      </div>

      <div class="right">
        <div class="right-money">
          <i>¥</i><span>40</span><b>起</b>
        </div>
        <div class="right-btn">
          <router-link to="/Reserve">查看详情</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.six {
  max-width: 1100px;
  min-width: 1000px;
  margin: auto;
  height: 30px;
  background-color: rgb(231, 231, 231);
}
.container{
  max-width: 1100px;
  min-width: 1000px;
  border: 1px solid #ccc;
  margin: 10px auto;
  display: flex;
}
.container .leftimg{
  width: 300px;
  height: 250px;
  margin-left: 20px;
  position: relative;
}
.container .leftimg>img{
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.container .zhong{
  width: 500px;
  height: 250px;
  position: relative;
  margin-left: 25px;
}
.container .zhong-title{
  font-size: 26px;
  font-weight: 400;
  height: 40px;
  line-height: 30px;
  position: absolute;
  top: 20%;
}
.container .zhong-one{
  font-size: 16px;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 35%;
  color: #999999;
}
.container .zhong-one span:nth-child(2){
  margin-left: 20px;
}
.container .zhong-one span:nth-child(3){
  margin-left: 20px;
}
.container .zhong-one span:nth-child(4){
  margin-left: 20px;
}
.container .zhong-one span i{
  color: #f05b47;
}
.container .zhong-title h2>a{
  text-decoration: none;
  color: #222222;
}
.container .zhong-text{
  width: 500px;
  color: #999999;
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  position: absolute;
  top: 48%;
}
.container .zhong-adress{
  color: #222222;
  font-size: 15px;
  font-weight: 400;
  position: absolute;
  top: 66%;
  line-height: 30px;
}
.container .right{
  width: 200px;
  height: 250px;
  position: relative;
}
.container .right-money{
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
}
.container .right-btn{
  width: 100px;
  height: 40px;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  background-color: #f05b47;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
}
.container .right-btn>a{
  color: #fff;
}
.container .right-money i,span{
  color: #f05b47;
  margin: 3px;
}
.container .right-money span{
  font-size: 28px;
}
</style>